<template>
    <div class="row list-panel">
        <group-detail ref="showGroupDetail" :store="storeCustomer" :customers="customers" :showstore="showGroup"
                      @onCancelNewModal="onCancelNewModal" :storeId="storeId"></group-detail>
        <show-group-orders ref="showGroupOrder" :store="storeOrder" :orders="orders" :showorder="showOrder"
                           :storeId="storeId"
                           @onCancelOrderModal="onCancelOrderModal"></show-group-orders>
        <print-list ref="showOrderPrint" :orderPrint="orderPrint" @onCancelOrderPrintModal="onCancelOrderPrintModal" :showOrderPrint="showOrderPrint"></print-list>
        <print-group ref="showGroupPrint" :gropuPrint="groupPrint" @onCancelGroupPrintModal="onCancelGroupPrintModal" :showGroupPrint="showGroupPrint"></print-group>
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>团购管理</a></li>
                        <li><a>团购列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px"
                             size="small">
                        <el-form-item label="团名称">
                            <el-input v-model="formInline.storeName" placeholder="团名称"></el-input>
                        </el-form-item>
                        <el-form-item label="团长姓名">
                            <el-input v-model="formInline.realName" placeholder="团长姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="开团日期">
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                                                v-model="formInline.fromDate"
                                                style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center;font-size: 12px">到</el-col>
                            <el-col :span="11">
                                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                                                v-model="formInline.toDate"
                                                style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="团长电话">
                            <el-input v-model="formInline.mobile" placeholder="用户电话"></el-input>
                        </el-form-item>
                        <el-form-item label="发货状态">
                            <el-select v-model="formInline.shipmentStatus" placeholder="" style="width:177px">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="待发货" value="0"></el-option>
                                <el-option label="已发货" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="float: right;">
                            <a class="revision-btn" href="javaScript:void(0)" @click="onSubmit()">搜 索</a>
                        </el-form-item>
                    </el-form>

                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn" @click="exportTodayList()">打印当日清单</a>
                        </div>
                    </div>

                    <template v-if="data != null">
                        <el-table ref="multipleTable" :data="data.list" tooltip-effect="dark" :border="true"
                                  class="list-table"
                                  :header-cell-style="{'background-color': '#F5F5F6'}" max-height="600"
                                  style="width: 100%">
                            <el-table-column type="selection" width="55" align="center">
                            </el-table-column>
                            <template v-for="columnName in columnNames">
                                <template v-if="columnName.prop === 'shipmentStatus'">
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color:#F00;" v-if="scope.row.shipmentStatus === 0">待发货</span>
                                            <span style="color:#1ab394;"
                                                  v-if="scope.row.shipmentStatus === 1">已发货</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'store.realName'">
                                    <el-table-column :label="columnName.label" width="100" align="center">
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" @click="showGroupDetail(scope.row)">
                                                {{scope.row.store.realName}}
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'createTime'">
                                    <el-table-column :label="columnName.label" width="100" align="center">
                                        <template slot-scope="scope">
                                            {{dateTimetoDate(scope.row.createTime)}}
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column :key="columnName.prop" :label="columnName.label"
                                                     :prop="columnName.prop"
                                                     align="center">
                                    </el-table-column>
                                </template>
                            </template>
                            <el-table-column label="操作" width="150" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click="showGroupOrder(scope.row)">详情
                                    </el-button>
                                    <el-button type="text" size="small" @click="exportOrderProducts(scope.row)">打印
                                    </el-button>
                                    <el-button type="text" size="small" v-if="scope.row.shipmentStatus === 0" @click="shipGoods(scope.row.id)">发货
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-pagination style="float: right;margin-top: 10px" @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange" :current-page.sync="data.currPage"
                                   :page-size="data.pageSize"
                                   layout="total, prev, pager, next" :total="data.totalCount">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import groupDetail from './GroupDetail.vue';
    import showGroupOrders from './showGroupOrders';
    import printList from './printList';
    import printGroup from './printGroup'

    export default {
        name: 'GroupBuyList',
        components: {
            groupDetail,
            showGroupOrders,
            printList,
            printGroup
        },
        data() {
            return {
                formInline: {
                    fromDate: null,
                    toDate: null,
                    storeName: null,
                    realName: null,
                    mobile: null,
                    shipmentStatus: ''
                },
                columnNames: [{
                    label: '团名称',
                    prop: 'store.storeName',
                    width: 180
                }, {
                    label: '团长',
                    prop: 'store.realName',
                    width: 120
                }, {
                    label: '联系电话',
                    prop: 'store.mobile',
                    width: 120
                }, {
                    label: '订单数量',
                    prop: 'count',
                    width: 100
                }, {
                    label: '净团购金额(元)',
                    prop: 'totalAmount',
                    width: 100
                }, {
                    label: '退单金额(元)',
                    prop: 'refundAmount',
                    width: 100
                }, {
                    label: '发货状态',
                    prop: 'shipmentStatus',
                    width: 180
                }, {
                    label: '开团日期',
                    prop: 'createTime',
                    width: 120
                }, {
                    label: '发货时间',
                    prop: 'shipmentTime',
                    width: 120
                }],
                multipleSelection: [],
                data: {},
                query: {
                    page: ''
                },
                storeCustomer: {
                    store: {}
                },
                storeOrder: {
                    store: {}
                },
                storeId: '',
                customers: {
                    list: []
                },
                showGroup: false,
                showOrder: false,
                orders: {},
                orderPrint:{},
                groupPrint:{},
                showOrderPrint:false,
                showGroupPrint:false
            }
        },
        mounted: function () {
            this.listAllOrderGroups();
        },
        methods: {
            async exportTodayList() {
                if (!this.formInline.fromDate || !this.formInline.toDate) {
                    this.formInline.fromDate = this.getDate()
                    this.formInline.toDate = this.getDate()
                }
                // this.$api.export('/mall/order/exportTotalGoodsExcel', this.formInline)
                let res = await this.$api.get('/mall/order/exportTotalGoods', this.formInline)
                if(res.code == 500){
                    console.log('今日清单为空!')
                    return
                }
                this.orderPrint = res.data;
                this.showOrderPrint = true
            },
            onCancelOrderPrintModal(){
                this.showOrderPrint = false
            },
            onCancelGroupPrintModal(){
                this.showGroupPrint = false
            },
            getDate() {
                var date = new Date()
                var Y = date.getFullYear();
                var M = date.getMonth() + 1;
                var d = date.getDate()
                return Y + '-' + M + '-' + d
            },
            exportAllList() {
            },
            async exportOrderProducts(item) {
                // this.$api.export('/mall/order/exportGroupGoodsExcel', {
                //     id: item.id
                // })
                // this.$api.export('', {groupId:item.id})
                let res = await this.$api.get('/mall/order/exportGroupGoods', {groupId:item.id});
                this.groupPrint = res.data;
                this.showGroupPrint = true;
            },
            async onSubmit() {
                let res = await this.$api.get('/mall/order/group/list', this.formInline);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listAllOrderGroups();
            },
            dateTimetoDate(str) {
                str = str.replace(/-/g, '/'); // "2010/08/01";
                var date = new Date(str);
                var Y = date.getFullYear()
                var M = date.getMonth() + 1
                var D = date.getDate()
                return Y + '-' + M + '-' + D
            },
            async showGroupDetail(item) {
                let res = await this.$api.get('/mall/store/list', {
                    storeId: item.storeId
                });
                let res2 = await this.$api.get('/mall/order/group/info/' + item.id, {})
                this.customers = res.page
                this.storeCustomer = res2.orderGroup
                this.storeId = item.storeId.toString()
                this.showGroup = true;
            },
            onCancelNewModal() {
                this.showGroup = false
            },
            onCancelOrderModal() {
                this.showOrder = false
            },
            async showGroupOrder(item) {
                let res = await this.$api.get('/mall/order/list', {
                    storeId: item.storeId,
                    statuses: '2,3',
                    flagTime:item.flagTime
                })
                let res2 = await this.$api.get('/mall/order/group/info/' + item.id, {})
                this.orders = res.page
                this.storeOrder = res2.orderGroup
                this.storeId = item.storeId.toString()
                this.showOrder = true
            },
            async listAllOrderGroups() {
                let res = await this.$api.get('/mall/order/group/list', this.query);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            },
            async shipGoods(orderGpId) {
                let res = await this.$api.put('/mall/order/shipGoods/' + orderGpId, {});
                if (res.code === 0) {
                    this.$message.success('发货成功');
                    this.listAllOrderGroups();
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .list-panel .content-wrapper /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        font-weight: normal;
    }

    .list-table {
        font-size: 12px;
    }
</style>
